<template>
    <div class="icon-button" @click="show = true" title="诸侯数据一览">
        <i class="fa fa-eye"></i>
    </div>
    <Teleport to="body">
        <Dialog v-show="show" load-animation modal :cancel-action="closeLordsInfo">
            <template #header>数据一览</template>
            <template #content>
                <InfoTable></InfoTable>
            </template>
        </Dialog>
    </Teleport>
</template>
<script lang="ts" setup name="InfoControl">
import Dialog from '@/components/ui/dialog.vue';
import InfoTable from '@/components/game/data/info-table.vue';
import { ref } from 'vue';
const show = ref(false);
const closeLordsInfo = () => {
    show.value = false;
};
</script>

<style scoped>
.icon-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 5vmin;
    height: 5vmin;
    cursor: pointer;
    border-radius: 1vmin;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3),
        inset 1px 1px 4px #fff,
        inset -1px -1px 4px #fff;
    position: relative;
    overflow: hidden;
    background-color: #b87333;
    transition: 0.5s ease-in-out;
}

i {
    z-index: 2;
}

.icon-button::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-image: url('/src/assets/img/texture/01.webp');
    background-size: cover;
    background-position: center;
    opacity: 0.3;
    z-index: 1;
    animation: right-slide-bg 60s linear infinite alternate 0s;
}

.icon-button:hover{
    box-shadow: none;
}

.icon-button:hover *{
    animation: none;
}
</style>